<template>
  <div class="app-container">
    <TheQueryForm
      :option="searchOption"
      @onSubmit="onSubmit"
      @onClear="onClear"
    ></TheQueryForm>
    <el-row style="margin-bottom: 20px">
      <el-col :span="18">
        <el-radio-group size="small" v-model="queryParams.changeState">
          <el-radio-button label="">全部</el-radio-button>
          <el-radio-button label="APPROVAL_FINISH">已完成</el-radio-button>
          <el-radio-button label="APPROVAL_ING" style="position: relative"
            >审批中
            <el-badge class="badge" :value="doingCount" :max="99"></el-badge
          ></el-radio-button>
          <el-radio-button label="APPROVAL_REFUSE">审批拒绝</el-radio-button>
          <el-radio-button label="APPROVAL_REVOKE">已撤回</el-radio-button>
        </el-radio-group>
      </el-col>
      <el-col :span="6" style="display: flex; justify-content: flex-end">
        <el-button type="primary" size="small" @click="onRecharge"
          >新增充值</el-button
        >
        <el-button size="small" :loading="exportLoading" @click="onRefund"
          >新增退款</el-button
        >
      </el-col>
    </el-row>
    <TheTable
      ref="tableRefs"
      :tableOption="tableOption"
      :pageNo.sync="pageNo"
      :limit.sync="limit"
      :api="queryPageApi"
      :queryParams="queryParams"
      :renderFunc="renderFunc"
      :autoPlay="false"
    />
    <Recharge ref="rechargeRefs" @submit="handleRecharge" />
    <RechargeView ref="rechargeViewRefs" />
    <Refund ref="refundRefs" @submit="handleRefund" />
    <RefundView ref="refundViewRefs" />
  </div>
</template>
<script>
import Recharge from "./components/recharge";
import RechargeView from "./components/rechargeView";
import Refund from "./components/refund";
import RefundView from "./components/refundView";

import {
  apiMemberBalanceRecharge,
  apiMemberBalanceRecordPage,
  apiMemberBalanceRecordCountByState,
  apiMemberBalanceRefund,
  apiGetDingtalkUserInfo,
} from "@/api/recharge.js";
import { apiMerchantPage } from "@/api/storeManager.js";
export default {
  components: { Recharge, RechargeView, Refund, RefundView },
  data() {
    const _this = this;
    return {
      activeStatus: "all",
      queryPageApi: apiMemberBalanceRecordPage,
      queryParams: { changeState: "" },
      pageNo: 1,
      limit: 10,
      doingCount: 0,
      exportLoading: false,
      searchOption: [
        {
          field: "memberBalanceRecordId",
          label: "记录id",
          placeholder: "记录id",
          type: "Input",
        },
        {
          type: "Select",
          field: "dataId",
          label: "商家名称",
          placeholder: "商家名称",
          api: apiMerchantPage,
          params: { pageNum: 1, pageSize: -1 },
          optionsKey: "merchantContactName",
          optionsValue: "merchantId",
          options:[],
        },

        {
          type: "Select",
          field: "contractState",
          label: "类型",
          placeholder: "类型",
          options: [
            { label: "保证金退款", value: "WORKER_SECURITY_DEPOSIT_REFUND" },
            { label: "余额充值", value: "MEMBER_BALANCE_RECHARGE" },
            { label: "余额退款", value: "MEMBER_BALANCE_REFUND_BALANCE" },
          ],
        },

        {
          type: "DatePickerRange",
          field: "time",
          label: "发起时间",
          placeholder: "发起时间",
        },
      ],
      tableOption: [
        {
          label: "记录id",
          prop: "memberBalanceRecordId",
          width: 120,
        },
        {
          label: "合作商信息",
          prop: "info",
          width: 250,
          render(createElement, { row }) {
            const dom = (
              <div class="">
                <div>{row.merchantName}</div>
                <div>{row.merchantContactName}</div>
                <div>{row.merchantContactPhoneNumber}</div>
              </div>
            );
            return dom;
          },
        },
        {
          label: "类型",
          prop: "changeType",
          width: 80,
          formatter({ changeType }) {
            return this.$filters.filterRechargeChangeType(changeType);
          },
        },
        {
          label: "变更金额",
          prop: "changeAmount",
          width: 80,
          formatter({ status }) {
            return Number(0.01).tranFormat(2, -2);
          },
        },
        {
          label: "状态",
          prop: "changeState",
          width: 80,
          formatter({ changeState }) {
            return this.$filters.filterRechargeChangeState(changeState);
          },
        },
        {
          label: "发起时间",
          width: 80,
          prop: "createTime",
          render(createElement, { row }) {
            try {
              const strArr = row.createTime.split(" ");
              const dom = (
                <div class="row">
                  <div>{strArr[0]}</div>
                  <div>{strArr[1]}</div>
                </div>
              );
              return dom;
            } catch (error) {
              return <div></div>;
            }
          },
        },

        {
          label: "结束时间",
          width: 80,
          prop: "finishTime",
          render(createElement, { row }) {
            try {
              const strArr = row.createTime.split(" ");
              const dom = (
                <div class="row">
                  <div>{strArr[0]}</div>
                  <div>{strArr[1]}</div>
                </div>
              );
              return dom;
            } catch (error) {
              return <div></div>;
            }
          },
        },

        {
          label: "发起人",
          width: 80,
          prop: "createUser",
        },
        {
          label: "操作",
          width: 80,
          prop: "operate",
          fixed: "right",
          render(h, { row }) {
            return h("el-row", [
              h("el-link", {
                domProps: {
                  innerHTML: "查看详情",
                },
                props: {
                  type: "primary",
                },
                on: {
                  click() {
                    const { changeType } = row;
                    console.log(changeType);
                    if (changeType == "MEMBER_BALANCE_RECHARGE") {
                      _this.$refs.rechargeViewRefs.open({
                        id: row.id,
                        businessType:"MEMBER_BALANCE_RECHARGE"

                      });
                    }

                    if (["MEMBER_BALANCE_REFUND_BALANCE"].includes(changeType)) {
                      _this.$refs.refundViewRefs.open({
                        id: row.id,
                        businessType:"MEMBER_BALANCE_REFUND_BALANCE"
                      });
                    }
                  },
                },
              }),
            ]);
          },
        },
      ],

      authCode: "1",
      code: "1",
    };
  },
  mounted() {
    const { code, authCode } = this.$route.query;
    this.code = code;
    this.authCode = authCode;
  },
  methods: {
    renderFunc(res) {
      apiMemberBalanceRecordCountByState({ type: "INCREASE" }).then((res) => {
        this.doingCount = res.data.recordCount;
      });
      return res;
    },

    handleRefund({ values, authCode } = {}) {
      apiGetDingtalkUserInfo(authCode).then((res) => {
        const params = {
          ...values,
          rechargeChannel: "MEMBER_BALANCE_RECHARGE",
          changeAmount: values.changeAmount * 100,
          initiateDingtalkId: res.data,
          approvalCertificate: values.approvalCertificate.join(","),
          dataType: "MERCHANT",
        };
        apiMemberBalanceRefund(params).then((res) => {
          this.$message({ type: "success", message: "申请成功" });
          this.$refs.tableRefs.refresh();
        });
      });
    },
    handleRecharge({ values, authCode } = {}) {
      apiGetDingtalkUserInfo(authCode).then((res) => {
        const params = {
          ...values,
          rechargeChannel: "MEMBER_BALANCE_RECHARGE",
          changeAmount: values.changeAmount * 100,
          approvalCertificate: values.approvalCertificate.join(","),
          initiateDingtalkId: res.data,
          dataType: "MERCHANT",
        };
        apiMemberBalanceRecharge(params).then((res) => {
          this.$message({ type: "success", message: "申请成功" });
          this.$refs.tableRefs.refresh();
        });
      });
    },
    // 新建充值
    onRecharge() {
      this.$refs.rechargeRefs.open();
    },
    // 新建退款
    onRefund() {
      console.log(this.$refs, "this.$refs.refundRefs");
      this.$refs.refundRefs.open();
    },

    onSubmit({ values }) {
      if (values.hasOwnProperty("time")) {
        values = {
          ...values,
          startTime: values.time ? values.time[0] : "",
          endTime: values.time ? values.time[1] : "",
        };
        delete values.time;
      }
      this.queryParams = { ...this.queryParams, ...values };
    },
    onClear() {
      this.queryParams = {};
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .row {
  display: flex;
  .span4 {
    flex: 1;
  }
  .span20 {
    flex: 5;
  }
}
::v-deep .badge {
  position: absolute;
  right: -0px;
  top: -10px;
  transform: scale(0.9);
}
</style>
